<template>
	<view class="container">
		<!-- 左侧房间类型菜单栏 -->
		<view class="menu">
			<view v-for="(type, index) in roomTypes" :key="index" class="menu-item"
				:class="{ 'active': selectedRoomType === type }" @click="selectRoomType(type)">
				{{ type }}
			</view>
		</view>

		<!-- 右侧内容区域 -->
		<view class="content">
			<!-- 动态房间配置展示框 -->
			<view class="room-config" v-if="allRooms.length > 0">
				<view class="room-layout">房间布局</view>
				<swiper class="swiper" indicator-dots autoplay interval="3000" circular>
					<swiper-item v-for="(item, index) in imgList" :key="index">
						<image :src="item" class="slide-image" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
				<view style="font-size: 25rpx;">
					<span style="font-weight: 600;font-size: 30rpx;">房间配置：</span>
					房间面积-{{ furnitureData.area }}m² •
					{{ furnitureData.refrigerator }}台冰箱 •
					{{ furnitureData.washingMachine }}台洗衣机 •
					{{ furnitureData.airConditioner }}台空调 •
					{{ furnitureData.fan }}台吊扇
				</view>
			</view>

			<!-- 房间列表 -->
			<view class="room-list">
				<view v-if="loading" class="loading">加载中...</view>
				<view v-else>
					<view v-if="allRooms.length === 0" class="no-data">暂无数据</view>
					<view v-else>
						<view v-for="(room, index) in allRooms" :key="index" class="room-item"
							@click="selectRoom(room)">
							<view class="room-info">
								<view class="room-name">{{ room.ss_mc }}</view>
								<view class="room-meta">
									<text>租金：￥{{ room.rentMoney }}</text>
									<text>定金：￥{{ room.depositMoney }}</text>
								</view>
							</view>
							<view class="room-type">{{ selectedRoomType }}</view>
						</view>
						<view v-if="noMoreData" class="no-more-data">没有更多数据了</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ajax
	} from '../../utils/request';

	export default {
		data() {
			return {
				roomTypes: ['单间', '双人间', '一房一厅'],
				selectedRoomType: '单间',
				allRooms: [],
				loading: true,
				currentPage: 1,
				pageSize: 10,
				noMoreData: false,
				furnitureData: {
					refrigerator: '0',
					washingMachine: '0',
					airConditioner: '0',
					fan: '0',
					area: '0',
				},
				imgList: [
					'https://i1.hdslb.com/bfs/archive/bde803ce2a07296fce116898ee6889081dd9b0a3.jpg',
				]
			};
		},
		onLoad() {
			this.fetchBindInfo();
		},
		onPageScroll(res) {
			const query = uni.createSelectorQuery().in(this);
			query.select('.content').boundingClientRect(data => {
				if (data && res.scrollTop + data.height - uni.getSystemInfoSync().windowHeight < 50) {
					if (!this.loading && !this.noMoreData) {
						this.currentPage += 1;
						this.fetchBindInfo();
					}
				}
			}).exec();
		},
		methods: {
			async fetchBindInfo() {
				try {
					this.loading = true;
					const typeIndex = this.roomTypes.indexOf(this.selectedRoomType);
					console.log(typeIndex);
					const res = await ajax('/api/meter/myssquery', 'POST', {
						page: this.currentPage,
						pageSize: this.pageSize,
						roomtype: typeIndex + 2
					});

					if (res.data?.rooms) {
						const newRooms = res.data.rooms.map(room => ({
							...room,
							rentMoney: room.rentMoney || '0',
							depositMoney: room.depositMoney || '0'
						}));

						if (this.currentPage === 1) {
							this.allRooms = newRooms;
							if (newRooms[0]) {
								this.updateFurnitureData(newRooms[0]);
							}
						} else {
							this.allRooms = [...this.allRooms, ...newRooms];
						}

						this.noMoreData = newRooms.length < this.pageSize;
					}
				} catch (error) {
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					});
				} finally {
					this.loading = false;
				}
			},
			updateFurnitureData(room) {
				this.furnitureData = {
					refrigerator: room.asset3 || '0',
					washingMachine: room.asset2 || '0',
					airConditioner: room.asset1 || '0',
					fan: room.asset4 || '0',
					area: room.asset10 || '0',
				};
			},
			selectRoomType(type) {
				this.selectedRoomType = type;
				this.currentPage = 1;
				this.noMoreData = false;
				this.fetchBindInfo();
			},
			selectRoom(room) {
				uni.showModal({
					title: '提示',
					content: `确定选择房间 ${room.ss_mc}吗`,
					success: (res) => {
						if (res.confirm) {
							uni.setStorageSync('selectedRoomInfo', room);
							uni.navigateTo({
								url: '/myDormitory/furniture/furniture',
							});
						}
					}
				})
			}
		}
	};
</script>

<style scoped>
	.container {
		display: flex;
		height: 100vh;
	}

	.menu {
		width: 200rpx;
		background-color: #f9f9f9;
		padding: 20rpx;
		position: fixed;
		/* 固定左侧菜单栏 */
		height: 100vh;
		/* 高度占满整个视口 */
		overflow-y: auto;
		/* 如果菜单内容过多，允许滚动 */
	}

	.menu-item {
		padding: 20rpx;
		text-align: center;
		margin-bottom: 10rpx;
		border-radius: 10rpx;
		cursor: pointer;
	}

	.menu-item.active {
		background-color: #2ba245;
		color: #fff;
	}

	.content {
		flex: 1;
		padding: 20rpx;
		margin-left: 240rpx;
		/* 留出左侧菜单栏的宽度 */
		height: 100vh;
		/* 高度占满整个视口 */
		overflow-y: auto;
		/* 允许右侧内容滚动 */
	}

	.room-config {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 12rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 20rpx;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		text-align: center;
		color: #333;
	}

	.room-layout {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		text-align: left;
	}

	.swiper {
		width: 100%;
		height: 300rpx;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 20rpx;
	}

	.slide-image {
		width: 100%;
		height: 100%;
	}

	.item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		padding: 10rpx 0;
		border-bottom: 1rpx solid #e0e0e0;
	}

	.label {
		min-width: 120rpx;
		text-align: justify;
		text-align-last: justify;
		color: #555;
		font-weight: bold;
		font-size: 28rpx;
	}

	.value {
		margin-left: 20rpx;
		color: #666;
		flex: 1;
		font-size: 28rpx;
	}

	.room-list {
		height: 60vh;
		/* 占右侧内容区域的60% */
		overflow-y: auto;
		/* 允许房间列表滚动 */
	}

	.loading,
	.no-data,
	.no-more-data {
		text-align: center;
		padding: 20rpx;
		color: #666;
	}

	/* 样式优化 */
	.room-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		margin: 15rpx 0;
		background: #fff;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.room-info {
		flex: 1;
	}

	.room-meta {
		margin-top: 10rpx;
		display: flex;
		flex-direction: column;
		font-size: 24rpx;
		color: #666;
	}

	.room-meta text {
		margin: 5rpx 0;
	}

	.room-type {
		background: #2ba245;
		color: white;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
	}
</style>